<template>
  <div class="login-index" :style="backgroundDiv">
    <div class="mid-index">
        <i style="top: 40px;font-size: 35px;left: 160px;position: absolute;" class="iconfont icon-r-love">
          注册
        </i>
      <el-form :model="registerForm" :rules="registerRules" ref="ruleForm" class="registerForm">
        <el-form-item label="用户名:" label-width="90px" prop="username">
          <el-input  v-model="registerForm.username" placeholder="请输入用户名">
            <i slot="prefix" class="iconfont icon-r-user1" style="font-size: 20px"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="密码 :" label-width="90px" prop="password">
          <el-input v-model="registerForm.password" show-password placeholder="请输入密码">
            <i slot="prefix" class="iconfont icon-r-lock" style="font-size: 20px"></i>
          </el-input>
        </el-form-item>

        <el-form-item label="电话号码 :" label-width="90px" prop="phone">
          <el-input v-model="registerForm.phone"  placeholder="请输入电话号码">
            <i slot="prefix" class="iconfont icon-r-lock" style="font-size: 20px"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="性别 :" label-width="90px"  prop="sex">
          <el-radio v-model="registerForm.sex" label="1">男</el-radio>
          <el-radio v-model="registerForm.sex" label="0">女</el-radio>
        </el-form-item>
        <el-form-item label="姓名 :" label-width="90px"  prop="name">
          <el-input v-model="registerForm.name"  placeholder="请输入真实姓名">
            <i slot="prefix" class="iconfont icon-r-lock" style="font-size: 20px"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="身份证号 :" label-width="90px" prop="idNumber">
          <el-input v-model="registerForm.idNumber" show-password  placeholder="请输入身份证号码">
            <i slot="prefix" class="iconfont icon-r-lock" style="font-size: 20px"></i>
          </el-input>
        </el-form-item>

        <el-form-item class="btns">
          <el-button type="primary" style="font-size: 30px" @click="submitLoginForm('ruleForm')">
            <i class="iconfont icon-r-yes" style="font-size: 20px"></i>
            注册</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request.js";
import {getUserName, setToken, setUserName} from "@/utils/storage.js";
import { toLoad } from "@/utils/initialize.js";

export default {
  name: "Login",
  data() {
    return {
      //背景图片
      backgroundDiv: {
        backgroundImage:
            "url(" + require("../assets/register.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
      registerForm:{
        username: "",
        password: "",
        phone: "",
        name: "",
        sex: "",
        idNumber: "",
      },
      registerRules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 3,
            max: 20,
            message: "长度在 3到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true, message: "请输入密码", trigger: "blur"
          },
          {
            min: 6,
            max: 20,
            message: "密码长度在6到20个字符",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入电话号码",
            trigger: "blur",
          },
          {
            min: 11,
            max: 11,
            message: "长度必须是11个字符",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        idNumber: [
          {
            required: true,
            message: "请输入身份证号码",
            trigger: "blur",
          },
          {
            min: 18,
            max: 18,
            message: "长度必须是18个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    toLoad()
  },
  methods: {

    //提交表单
    submitLoginForm(formName) {
      if (!/^[a-zA-Z\d]+$/.test(this.registerForm.username)) {
        this.$message.error("用户名有误,请重新输入");
        return;
      }
      if (!/^[a-zA-Z\d]+$/.test(this.registerForm.password)) {
        this.$message.error("密码有误,请重新输入");
        return;
      }
      if (!/^\d+$/.test(this.registerForm.phone)) {
        this.$message.error("电话格式有误,请重新输入");
        return;
      }
      if (!/^\d+$/.test(this.registerForm.idNumber)) {
        this.$message.error("身份证号格式有误,请重新输入");
        return;
      }
      if (!/^[\u4e00-\u9fa5]+$/.test(this.registerForm.name)) {
        this.$message.error("姓名只能是中文,请重新输入");
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          request
              .post("/api/user/register",this.registerForm)
              .then((res) => {
                console.log(res);
                if(res.data.code == 1){
                  this.$message({
                    type:"success",
                    message:"注册成功"
                  })
                  this.$router.push("/login");
                }else {
                  this.$message.error(
                      res.data.msg
                  );
                }
              })
              .catch((e) => {
                console.log("e,",e);
                return false;
              });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  }
};
</script>

<style lang="scss">
.codeInput {
  width: 70%;
  margin-right: 10px;
}
.findPassword {
  margin-top: 0px;
}
.login-index {
  background: #2b4b6b;
  height: 100%;
  position: relative;
}
.mid-index {

  width: 450px;
  height: 600px;
  background: white;
  //绝对定位，相对于最左上角来说
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.logo-index {
  background: white;
  height: 130px;
  width: 130px;
  border-radius: 50%;
  padding: 10px;
  //子绝父相,使一个div悬挂在另一个div上中间
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);

  border: 1px solid #eee;
  box-shadow: 0px 0px 10px #ddd;

  img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: #eeeeee;
  }
}

.registerForm {
  margin-top: 120px;
}
.el-form-item {
  margin-left: 20px;
  margin-right: 20px;
}
//角色单选
.role {
  margin-left: 90px;
  margin-right: 90px;
}

//按钮
.btns {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  margin: 0 auto; /* 左右居中 */
  height: 25px;
}
</style>
